<style>
    .formFillKqTable {
        /* width: 100%; */
        border:1px solid #FFF;
        border-right: none;
    }
    .formFillKqTable thead {
        width: 100%;
        background-color: #2669B1;
        color: #fff;
    }
    .formFillKqTable thead th {
        height: 30px;
        line-height: 30px;
        border-right: 1px solid #FFF;
    }
    .formFillKqTable tbody tr {
        border-top: 1px solid #FFF;
        background-color: #D3E5FF;
    }
    .formFillKqTable tbody tr td {
        height: 30px;
        line-height: 30px;
        border-right: 1px solid #FFF;
    }
    .formFillKqTable tbody tr td select {
        height: 26px;
    }
    .formFillKqTable tbody tr .data-td {
        min-width:30px;
        text-align: center; 
    }
    .dateYellow {
        background-color: #FEB726;
    }
    .dateGreen {
        background-color: #62B87A;
    }
    .hide {
        display: none;
    }
    .formFillKqTable .layui-form-checkbox {
        padding-left: 0px;
    }
    .formFillKqTable .T-firstTd {
        position: relative;
    }
    .formFillKqTable .T-firstTd .layui-icon {
        width: 18px;
        height: 18px;
        border: 1px solid red;
        padding-top: 2px;
    }
    .formFillKqTable .T-firstTd .layui-icon-edit {
        position: absolute;
        left: 3px;
        top: 3px;
        line-height: 12px;
        color: red;
        cursor: pointer;
        display: none;
    }
    .formFillKqTable .T-firstTd .layui-icon-form {
        position: absolute;
        right: 3px;
        top: 3px;
        line-height: 12px;
        color: red;
        cursor: pointer;
        display: none;
    }
    .select-content {
        margin: 5px 5px;
    }
    .select-content select {
        height: 30px;
    }
    .formFillKqTableBox2{
        overflow: auto;
    }
    .formFillKqTableBox1{
        float: left;
    }
</style>
<script type="text/html" template lay-done="layui.data.formFillKqTable(d);">
    <div class="formFillKqTableBox1"> 
    <table class="formFillKqTable  layui-form " data-id={{d.params.basic.taskid}}>
            <thead>
              <tr>
                <th>
                    <div style="min-width:40px;text-align:center;white-space:nowrap;">
                        <input type="checkbox" lay-filter="checkAll" class="T-checkAll" lay-skin="primary">
                    </div>
                </th>
                <th lay-data="{fixed:'left'}" ><div  style="min-width:120px;text-align:center;white-space:nowrap;">状态</div></th>
                <th  ><div  style="min-width:50px;text-align:center;white-space:nowrap;">姓名</div></th>
                <th  ><div  style="min-width:45px;text-align:center;white-space:nowrap;">日期</div></th> 
                
              </tr>
            </thead>
            <tbody>
                {{#
                    var basic = d.params.basic || {};
                    if(d.params.users) {
                        layui.each(d.params.users, function(index,item) {
                }}
                <tr class='T-firstTr'>
                    <td rowspan="2" style="text-align: center;vertical-align:middle;">
                        <input type="checkbox" lay-filter="checkItem" class="T-isChecked" lay-skin="primary">
                    </td>
                    <td rowspan="2" class="T-firstTd" style="text-align: center;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">
                        <i class="layui-icon layui-icon-edit" data-id="{{item.writeuserid}}"></i>
                        <i class="layui-icon layui-icon-form" data-id="{{item.writeid}}"></i>
                        <span style="vertical-align:middle;" lay-tips="{{item.checkStateName}}">{{item.checkStateName}}</span>
                    </td>
                    <td rowspan="2" class="trbasic" style="text-align: center;vertical-align:middle;white-space:nowrap;">
                        <span>{{item.writeusername}}</span>
                        <input type="text" class="hide" name="dept_code" value={{basic.dept_code}} >
                        <input type="text" class="hide" name="dept_name" value={{basic.dept_name}} >
                        <input type="text" class="hide" name="dept_id" value={{basic.dept_id}} >
                        <input type="text" class="hide" name="dataid" value={{item.dataid}} >
                        <input type="text" class="hide" name="writeid" value={{item.writeid}} >
                        <input type="text" class="hide" name="writeuserid" value={{item.writeuserid}} >
                        <input type="text" class="hide" name="writeusername" value={{item.writeusername}} >
                        <input type="text" class="hide" name="checkStateName" value={{item.checkStateName}} >
                        <input type="text" class="hide" name="checkingstate" value={{item.checkingstate}} >
                    </td>
                    <td style="text-align: center;">上午</td> 
                </tr>
                <tr>
                    <td style="text-align: center;">下午</td> 
                </tr>
                {{#
                        })
                    }
                }}
            </tbody>
          </table>
        </div>
        <div class="formFillKqTableBox2">
          <table class="formFillKqTable formFillKqTable2 layui-form" data-id={{d.params.basic.taskid}}>
            <thead>
                <tr>  
                    <th style="display:none">
                        <div style="min-width:40px;text-align:center;white-space:nowrap;">
                            <input type="checkbox" lay-filter="checkAll" class="T-checkAll" lay-skin="primary">
                        </div>
                    </th>
                      {{#
                          if(d.params.dates) {
                              layui.each(d.params.dates, function(index,item) {
                              var tdclass = item.state === '0' ? 'dateYellow' : 'dateGreen';
                      }}
                          <th  class={{tdclass}}>{{item.day}}</th>
                      {{#
                              })
                          }
                      }} 
                  
                </tr>
              </thead>
              <tbody>
                  {{#
                      var basic = d.params.basic || {};
                      if(d.params.users) {
                          layui.each(d.params.users, function(index,item) {
                  }}
                  <tr class='T-firstTr'> 
                    <td  rowspan="2" style="text-align: center;vertical-align:middle; display:none">
                        <input type="checkbox" lay-filter="checkItem" class="T-isChecked" lay-skin="primary">
                    </td>
                  {{#
                      layui.each(item.users_time[0].users_time_day, function(dndex,dtem) {
                  }}
                      <td><div style="min-width:80px;text-align: center;" class="T-dateInfo">
                          <select name="symbol" lay-ignore style="width: 100%;" data-isholiday="{{dtem.state}}">
                              <option value=""></option>
                              {{#
                                  layui.each(d.params.options, function(oi,otem) {
                              }}
                              <option value="{{otem.key}}" {{ dtem.symbol === otem.key ? "selected" : null}}>{{otem.value}}</option>
                              {{#
                                  })
                              }}
                          </select>
                          <input type="text" class="hide" name="time" value={{dtem.date}}>
                          <input type="text" class="hide" name="time_sort" value='1' >
                      </div></td>
                  {{#
                      })
                  }}
                  </tr>
                  <tr> 
                      {{#
                          layui.each(item.users_time[1].users_time_day, function(index,dtem) {
                      }}
                          <td><div style="min-width:80px;text-align: center;" class="T-dateInfo">
                              <select name="symbol" lay-ignore style="width: 100%;" data-isholiday="{{dtem.state}}">
                                  <option value=""></option>
                                  {{#
                                      layui.each(d.params.options, function(oi,otem) {
                                  }}
                                  <option value="{{otem.key}}" {{ dtem.symbol === otem.key ? "selected" : null}}>{{otem.value}}</option>
                                  {{#
                                      })
                                  }}
                              </select>
                              <input type="text" class="hide" name="time" value={{dtem.date}} >
                          <input type="text" class="hide" name="time_sort" value='2' >
                          </div></td>
                      {{#
                          })
                      }}
                  </tr>
                  {{#
                          })
                      }
                  }}
              </tbody> 
          </table>  
        </div> 
</script>
<script type="text/html" id="formFillKqTableSelectTpl">
    <select name="symbol" style="width: 100%;">
        <option value=""></option>
        {{#
            layui.each(d, function(oi,otem) {
        }}
        <option value="{{otem.key}}">{{otem.value}}</option>
        {{#
            })
        }}
    </select>
</script>
<script>
    layui.data.formFillKqTable = function (d) { 
        layui.use(['admin', 'form', 'tools', 'laytpl'], function(){
            var $ = layui.$,
                form = layui.form,
                view = layui.view,
                admin = layui.admin,
                tData = d.params.data;
                laytpl = layui.laytpl,
                options = d.params.options;
            form.render()
            form.on('checkbox(checkAll)', function(data){
                var isChecked = data.elem.checked;
                $('.T-isChecked').prop('checked', isChecked);
                form.render();
            }); 

            $('.T-firstTr').on('mouseenter',function() {
                $(this).find('.T-firstTd .layui-icon').show();
            });
            $('.T-firstTr').on('mouseleave',function() {
                $(this).find('.T-firstTd .layui-icon').hide();
            });

            //点击行删除
            $('.T-firstTr .T-firstTd .layui-icon-edit').on('click', function() { 
                var id = $(this).data('id'),
                    $tr = $(this).closest('tr');  
                layer.open({
                    type: 1,
                    id: 'edit-all-kq-tr',
                    title: '批量修改',
                    skin: 'layui-layer-demo', //样式类名
                    anim: 2,
                    closeBtn: 2,
                    area: ['300px', '150px'],
                    shadeClose: true, //开启遮罩关闭
                    content: '<div class="select-content"></div>',
                    success: function(lay, index){  
                        var getTpl = formFillKqTableSelectTpl.innerHTML;
                        var $tplC =$(lay).find('.select-content');
                        laytpl(getTpl).render(options, function(html){
                            $tplC.html(html);
                        });
                    },
                    btn: ['确定', '取消'],
                    btnAlign: 'c',
                    yes: function(index, lay){ 
                        // $tr.find('select')  $tr.next('tr') 
                        var value = $(lay).find('select').val(); 
                        var trIndex=$tr.index();
                        // if($tr.index()>0){
                        //     trIndex=$tr.index()-1;
                        // }else{
                        //     trIndex=$tr.index();
                        // }
                        $(".formFillKqTableBox2 tbody tr").eq(trIndex).find("select").each(function(index,item) {
                            if($(item).data('isholiday')*1 === 0) {
                                $(item).val(value);
                            }
                        });
                       $(".formFillKqTableBox2 tbody tr").eq(trIndex).next('tr').find('select').each(function(index,item) {
                            if($(item).data('isholiday')*1 === 0) {
                                $(item).val(value);
                            }
                        });
                        layer.close(index);
                    }
                });
            });

            //点击行记录
            $('.T-firstTr .T-firstTd .layui-icon-form').on('click', function() {
                var id = $(this).data('id');
                    admin.req({
						url: 'myapi/DC/api/rest/web/custom/GainHistory',
						data: {
							id: id
						},
						done: function(res){
							if(res.retcode == '0'){
								if(res.data && res.data.length > 0){
									var taskrecode = layer.open({
										id: 'kq-record-html',
										title:'<i class="formFill-icon"></i><span style="color:#FFF;">查看记录</span>',
										offset: '110px',
										type: 1,
										shadeClose: true,
										area: ['700px', '450px'],
										resize: false,
										success: function(lay, index){
											view(this.id).render('./task/temporary/history', {history: res.data});
										},
										cancel: function(lay, index){
											layer.close(taskrecode);
										}
									})
								}else{
									layer.msg('暂无记录', {time: 1000});
								}
							}
						}
                    })
            });
        });
    }
</script>